<script setup>
import {ref, defineEmits, defineProps} from 'vue';
import StepTitleDescription from '@/components/common/StepTitleDescription.vue'
import OneImage from '@/components/common/OneImage.vue'
import InchesInput from '@/components/common/InchesInput.vue'

const stepTitleDescription = ref({
  title: 'Step 6',
  description: 'How many inches above the window frame would you mount the rod?',
})

const emit = defineEmits(['submit'])

const OneImageData = ref({
  src: 'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_B4-1.svg?v=1745722301',
  alt: 'step6',
})

const getInches = (inches) => {
  emit('submit', inches)
}


</script>

<template>

  <div class="content-container">
    <StepTitleDescription :title-and-description="stepTitleDescription" />
    <p>(For pleated and flat hook style, please measure from rod ring eyelet or track runner eyelet to the window frame, which means you should take the hardware (rings/tracks) height into consideration;

      For ceiling mount, measure from the ceiling to top of window frame, consider subtracting track height.)</p>
    <OneImage :OneImage="OneImageData"/>
    <InchesInput @submit="getInches" />

    <p>
      To provide visual height to room, mount rod closer to ceiling line. In general, rods should be mounted at least 6-8" above window frame, if you have wall space.
    </p>
  </div>

</template>

<style scoped>

.content-container {
   display:flex;
   flex-direction: column;
  justify-content: center;
  align-items: center;
}

</style>